<template>
    <el-pagination class="page"
                   v-show="total > 0"
                   layout="total,prev,pager,next,sizes"
                   :total="total"
                   :current-page="current"
                   :page-sizes="[10,20,30,40]"
                   @current-change="pageChange"
                   @size-change="sizeChange"/>
</template>

<script>
    export default {
        name: 'page',
        data() {
            return {
                obj: {
                    size: 10,
                    current: 1
                }
            }
        },
        props: {
            total: {
                type: Number,
                required: true
            },
            current: {
                type: Number,
                required: true
            },
            size: {
                type: Number,
                required: true
            }
        },
        methods: {
            pageChange(page) {
                this.obj.current = page;
                this.change(this.obj);
            },
            sizeChange(size) {
                this.obj.size = size;
                this.change(this.obj);
            },
            change(obj) {
                this.$emit('update:current', obj.current)
                this.$emit('update:size', obj.size)
                this.$emit('change', obj);
            }
        }
    }
</script>
